<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3动画</title>
    <style>
        div{
            height: 80px;
            width: 80px;
            background-color: red;
            margin: 5px;
            float: left;
        }

        /*定义动画的起始和结束帧对象*/
        @keyframes myfirst /*动画帧的对象名*/
        {
            /*from表示动画开始时的状态*/
            from {background: red;}
            /*to表示动画结束时的状态*/
            to {background: yellow;}
        }

        @-webkit-keyframes myfirst /* Safari 与 Chrome */
        {
            from {background: red;}
            to {background: yellow;}
        }

        /*定义动画的起始和结束帧对象*/
        @keyframes myframe /*动画帧的对象名*/
        {
            /*0%表示动画开始时的状态*/
            0% {
                background: red;
            }

            30%{
                background: blue;
            }
            60%{
                background: chartreuse;
            }
            /*100%表示动画结束时的状态*/
            100% {background: yellow;}
        }

        @-webkit-keyframes myframe /* Safari 与 Chrome */
        {
            /*0%表示动画开始时的状态*/
            0% {
                background: red;
            }

            30%{
                background: blue;
            }
            60%{
                background: chartreuse;
            }
            /*100%表示动画结束时的状态*/
            100% {background: yellow;}
        }

        #div1{
           /* 动画属性，指定自定义的开始和结束帧对象*/
            animation: myfirst 5s infinite;
            -webkit-animation: myfirst 5s  infinite; /* Safari 与 Chrome */
        }
        #div2{
            /* 动画属性，指定自定义的开始和结束帧对象*/
            animation: myframe 5s infinite;
            -webkit-animation: myframe 5s  infinite; /* Safari 与 Chrome */
        }
    </style>
</head>
<body>
<div id="div1">
    div1

</div>
<div id="div2">
    div2

</div>
</body>
</html>